<template>
  <div class="mui-pages" style="background-color: #fff">
    <header class="mui-bar mui-bar-nav flex-between-center">
      <a @click="fn.back()" href="javascript:void(0)"
        ><img class="back-btn" src="../../../../static/images/back.png"
      /></a>
      <div class="header-search keyworld-search">
        <i class="search-icon" @click="search"></i>
        <input
          type="search"
          v-model="keyword"
          placeholder="请输入关键词搜索"
          value=""
        />
      </div>
    </header>
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll mui-scroll-wrapper">
        <!-- --------支部---------------start -->
        <div id="branch" class="mui-scroll-wrapper">
          <div class="organization-lists mui-scroll-wrapper">
            <cube-scroll
              ref="scroll"
              :options="options"
              @pulling-up="onPullingUp"
            >
              <cube-swipe>
                <transition-group name="swipe" tag="div">
                  <div
                    class="mui-table-view-cell"
                    v-for="(data, index) in branchData"
                    :key="data.id"
                  >
                    <cube-swipe-item
                      ref="swipeItem"
                      :btns="data.btns"
                      :index="index"
                      :class="{ 'swiper-no-swiping': !canEditOrDelete(data) }"
                      @btn-click="edit"
                    >
                      <div @click="detail(data)">
                        <div class="mui-slider-handle">
                          <h2 class="organization-lists-title">
                            {{ data.title }}
                          </h2>
                          <div class="organization-lists-time">
                            <span
                              >{{ data.createTime }}
                              {{ data.publisherName }}&nbsp;{{
                                data.sourceOfPublication
                              }}&nbsp;阅读：{{ data.readingVolume }}</span
                            >
                          </div>
                        </div>
                      </div>
                    </cube-swipe-item>
                  </div>
                </transition-group>
              </cube-swipe>
              <!-- <div class="text-center no-data" v-if="branchData.length === 0">
                <img src="../../../../static/images/no_data.png" alt="" />
                <p>暂无数据</p>
              </div> -->
              <!-- W noData -->
              <noData v-if="branchData.length === 0"></noData>
              <onBottom v-else-if="onBottom"></onBottom>
            </cube-scroll>
          </div>
        </div>
        <!-- --------支部---------------end -->
      </div>
    </div>
  </div>
</template>

<script>
import footerbar from "../common/footerbar.vue";
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
import moment from "moment";

export default {
  components: {
    footerbar,
  },
  name: "",
  data() {
    return {
      fn: tools,
      isShowFilter: false,
      tabIndex: 0,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      objectsName: "",
      branchData: [],
      infinite: true,
      pageIndex: 0,
      pageSize: 10,
      startTime: "",
      endTime: "",
      partyMemberId: "",
      title: "",
      keyword: "",
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    edit(btn, index) {
      let data = this.branchData[index];
      if (btn.action === "edit") {
        this.$store.state.editAffairsData = null;
        this.$store.state.editAffairsData = data;
        this.$router.push({ name: "affairsAdd" });
      } else if (btn.action === "delete") {
        this.deleteItem(data.id);
      }
    },
    detail(data) {
      let userInfo = this.$store.state.userInfo || {};
      let param = {
        affarisId: data.id,
        partyMemberId: userInfo.partyMemberModel.id,
      };
      loginService.getPartyAffairsInfo(param).then((res) => {
        if (res.code !== 200) {
          return tools.tip(res.message);
        }
        if (res.data.attachmentList === null) {
          res.data.attachmentList = [];
        }
        this.$store.state.affairsData = res.data;
        this.$router.push({ path: `/newsDetails/${data.id}/2` });
      });
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
    loadData() {
      this.partyGroupId = this.$route.params.partyGroupId;
      this.title = this.$route.params.title;
      if (!this.partyGroupId) {
        return;
      }
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        sourceOfPublicationId: "branch",
        sortOrder: "DESC",
        sortField: "createTime",
        startTime: this.startTime,
        endTime: this.endTime,
        partyGroupId: this.partyGroupId,
        title: this.keyword,
      };
      loginService.getPartyAffairs(data).then((res) => {
        if (res.code !== 200) {
          this.$refs.scroll.forceUpdate();
          return tools.tip(
            res.describe === "未查询到资源" ? "已无更多数据" : res.describe
          );
        }
        this.pageIndex++;
        res.data.forEach((v, i) => {
          v.btns = [];
          if (res.data[i].modifyAuthority === "true") {
            v.btns.push({
              action: "edit",
              text: "修改",
              color: "#f0ad4e",
            });
          }
          if (res.data[i].deletePermission === "true") {
            v.btns.push({
              action: "delete",
              text: "删除",
              color: "#f00",
            });
          }
        });
        this.branchData = this.branchData.concat(res.data);
        setTimeout(() => {
          this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = !true;
        }, 100);
      });
    },
    search() {
      this.branchData = [];
      this.pageIndex = 0;
      this.loadData();
    },
    delPartyAffairsById(_this, id) {
      loginService.delPartyAffairsById(id).then((res) => {
        tools.tip(res.message);
        _this.pageIndex = 0;
        _this.branchData = [];
        _this.loadData();
      });
    },
    deleteItem(id) {
      let _this = this;
      this.$createDialog({
        type: "confirm",
        // icon: "cubeic-alert",
        title: "温馨提示",
        content: "确定删除记录吗？",
        confirmBtn: {
          text: "确定删除",
          active: true,
          disabled: false,
          href: "javascript:;",
        },
        cancelBtn: {
          text: "取消删除",
          active: false,
          disabled: false,
          href: "javascript:;",
        },
        onConfirm: () => {
          _this.delPartyAffairsById(_this, id);
        },
        onCancel: () => {},
      }).show();
    },
    showTimePicker(flag) {
      let _this = this;
      this.$createTimePicker({
        minuteStep: 1,
        delay: 1,
        min: parseInt(moment().subtract(10, "days").format("x")),
        day: {
          len: 90,
          filter: ["今天", "明天"],
          format: "M月d日",
        },
        onSelect: (selectedTime, selectedText, formatedTime) => {
          if (flag === 0) {
            _this.startTime = moment(selectedTime).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          } else {
            _this.endTime = moment(selectedTime).format("YYYY-MM-DD HH:mm:ss");
          }
        },
      })
        .show()
        .setTime(parseInt(moment().format("x")));
    },
    reset() {
      this.startTime = "";
      this.endTime = "";
    },
    submit() {
      this.pageIndex = 0;
      this.branchData = [];
      this.loadData();
      this.isShowFilter = false;
    },
    canEditOrDelete(data) {
      return (
        data.modifyAuthority === "true" || data.deletePermission === "true"
      );
    },
  },
};
</script>
<style>
#offCanvasSide {
  visibility: visible;
  z-index: 3;
}
.swiper-no-swiping {
  transform: translateX(0) !important;
}
</style>
